<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <ul class="header">
      <router-link to="/films/nowplaying" custom v-slot="{isActive,navigate}">
        <li @click="navigate">
          <span :class="isActive?'myclass':''">正在热映</span>
        </li>
      </router-link>

      <router-link to="/films/comingsoon" custom v-slot="{isActive,navigate}">
        <li @click="navigate">
          <span :class="isActive?'myclass':''">即将上映</span>
        </li>
      </router-link>
    </ul>
    <router-view></router-view>

  </div>
</template>

<style scoped lang="scss">
.header {
  display: flex;
  height: 50px;
  line-height: 50px;
  text-align: center;
  list-style: none;
  position: sticky;
  top:0;
  z-index: 100;
  background: white;
  li {
    flex: 1;

    span {
      padding: 10px 0;
    }
  }
}

.myclass {
  color: red;
  border-bottom: 3px solid red;
}

.my-swipe {
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
}
</style>
<script setup>
import {Swipe as vanSwipe, SwipeItem as vanSwipeItem} from 'vant';
</script>